<!--
  author: tangcheng_cd
  create by: 2018/5/28
  descr: 地理位置层叠组件 支持v-model语法糖
-->
<template>
  <el-cascader
    popper-class="zIndex-popper"
    placeholder="试试搜索"
    :props="props"
    :options="options"
    :value="compValue"
    @input="inputChange"
    filterable
    :clearable="true"
    class="locs-cascader"
    change-on-select
  ></el-cascader>
</template>

<script type="text/ecmascript-6">
import api from '../../../api/url' // 获取机构地 理位置
import {transTreeDataToVue} from '../../../assets/js'
import ajax from '../../../api/ajax'

export default {
  name: 'locs-cascader',
  props: {
    value: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      // 组件值
      compValue: this.value,
      // 数据结构关键字配置
      props: {
        value: 'id',
        label: 'name',
        children: 'children'
      },
      options: []
    }
  },
  methods: {
    inputChange (value) {
      this.$emit('input', value)
    },
    getLocsCascader () {
      ajax.post(api.GET_ALL_LOCS).then(res => {
        this.options = transTreeDataToVue(res.data)
      }).catch(e => {
        console.error('获取地理位置发生错误！')
      })
    },
    refreshLocsCascader () {
      this.getLocsCascader()
    },
    clearCascader () { // 清空联级选择器里的选中项
      this.compValue = []
    }
  },
  created () {
    this.getLocsCascader()
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.locs-cascader
  .el-input
    .el-input__inner
      height 38px
      width 260px
</style>
